{template 'header'}
<div class="row" >
    <div class="col-md-12">
    <div class="panel panel-default" style="height: 1300px;background: #F0F0F0">
        <div class="form-group" style="margin-top: 20px;">
            <label class="col-md-2 control-label" for="text-input"> </label>
            <div class="col-sm-8" style="margin-left: -30px;">使用自定义模板：
            <label class="switch switch-primary">
                <input type="checkbox" name="status" {if $result['on_off']==1} checked {/if} value="1" class="switch-input" >
                <span class="switch-label" data-on="On" data-off="Off"></span>
                <span class="switch-handle"></span>
            </label>
        </div>
        </div>
        <form  method="post" action="{php echo webUrl('other/index/bottom')}"  enctype="multipart/form-data" class="form-horizontal ">
        <div class="page" {if $result['on_off']==0} style="display: none;" {/if}>
            <div class="choose_border">
                <div class="choose_border_title">选择默认图片</div>
                <div class="choose_border_title">选择点击后图片</div>
                <div class="choose_border_input" id="m1_img">{php echo tpl_form_field_image2('m1_img',$result['m1_img']);}</div>
                <div class="choose_border_input" id="m1_selimg">{php echo tpl_form_field_image2('m1_selimg',$result['m1_selimg']);}</div>
                <div class="choose_border_input" id="m2_img">{php echo tpl_form_field_image2('m2_img',$result['m2_img']);}</div>
                <div class="choose_border_input" id="m2_selimg">{php echo tpl_form_field_image2('m2_selimg',$result['m2_selimg']);}</div>
                <div class="choose_border_input" id="m3_img">{php echo tpl_form_field_image2('m3_img',$result['m3_img']);}</div>
                <div class="choose_border_input" id="m3_selimg">{php echo tpl_form_field_image2('m3_selimg',$result['m3_selimg']);}</div>
                <div class="choose_border_input" id="m4_img">{php echo tpl_form_field_image2('m4_img',$result['m4_img']);}</div>
                <div class="choose_border_input" id="m4_selimg">{php echo tpl_form_field_image2('m4_selimg',$result['m4_selimg']);}</div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">图片尺寸</div>
                    <div class="choose_bottom_input"><input type="text" class="form-control" id="notice" name="iconsize" value="{$result['iconsize']}">
                        <span style="color: #999999;">建议尺寸75(表示长75 宽75)</span>
                    </div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">导航一</div>
                    <div class="choose_bottom_input"><input type="text" class="form-control" id="notice" name="m1_name" value="{$result['m1_name']}"></div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">导航二</div>
                    <div class="choose_bottom_input"><input type="text" class="form-control" id="notice" name="m2_name" value="{$result['m2_name']}"></div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">导航三</div>
                    <div class="choose_bottom_input"><input type="text" class="form-control" id="notice" name="m3_name" value="{$result['m3_name']}"></div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">导航四</div>
                    <div class="choose_bottom_input"><input type="text" class="form-control" id="notice" name="m4_name" value="{$result['m4_name']}"></div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">字体颜色</div>
                    <div class="choose_bottom_input">{php echo tpl_form_field_color('color',$result['color'])}</div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">背景颜色</div>
                    <div class="choose_bottom_input">{php echo tpl_form_field_color('background_color',$result['background_color'])}</div>
                </div>
                <div class="choose_bottom">
                    <div class="choose_bottom_title">选中后颜色</div>
                    <div class="choose_bottom_input">{php echo tpl_form_field_color('sel_color',$result['sel_color'])}</div>
                </div>
                <div style="padding-left: 200px;padding-top: 20px;clear:both;">
                    <input style="" type="button" class="btn btn-default" value="点击预览" id="click">
                    <input style="" type="submit" name="submit" class="btn btn-default">
                </div>

            </div>
            <div class="phone_border">
           <div class="phone_img_border">
            <img class="phone_img" src="/addons/{MODEL_NAME}/static/images/90116.png">
            <div class="phone_modle_border">
               <div class="phone_modle">
                 <img class="phone_modle_img diyiye_img" style="width: 36px;height: 36px;" src="{php echo MODEL_LOCAL}static/images/35351.png">
                 <div class="phone_modle_title diyiye">首页</div>
               </div>
               <div class="phone_modle">
                 <img class="phone_modle_img dierye_img" style="width: 36px;height: 36px;" src="{php echo MODEL_LOCAL}static/images/35338.png">
                 <div class="phone_modle_title dierye">产品</div>
               </div>
               <div class="phone_modle">
                 <img class="phone_modle_img disanye_img" style="width: 36px;height: 36px;" src="{php echo MODEL_LOCAL}static/images/5346.png">
                 <div class="phone_modle_title disanye">预约体验</div>
               </div>
               <div class="phone_modle">
                 <img class="phone_modle_img disiye_img" style="width: 36px;height: 36px;" src="{php echo MODEL_LOCAL}static/images/5346.png">
                 <div class="phone_modle_title disiye">联系我们</div>
               </div>
            </div>
           </div>
        </div>


        <div>
            
        </div>
    </div>
    </form>
    </div>
</div></div></div></div>
<script type="text/javascript">   
    $(".switch-input").click(function(){
            var status = $(".switch-input").attr('checked'); 
            if(status != 'checked')
            {
                $(".page").hide(500);
                status = 0;
            }
            else
            {
                $(".page").show(500);
                status = 1;
            }
            $.post("{php echo webUrl('other/index/asdsa')}", {status:status}, function(resp){
                
            });
        }); 

</script>

<script type="text/javascript">

    var m1_name = $("input[name='m1_name']").val();
    var m2_name = $("input[name='m2_name']").val();
    var m3_name = $("input[name='m3_name']").val();
    var m4_name = $("input[name='m4_name']").val();
    var color = $("input[name='color']").val();
    var sel_color = $("input[name='sel_color']").val();
    var background_color = $("input[name='background_color']").val();
    //var m1_img = $("input[name='m1_img']").val();
    //var m2_img = $("input[name='m2_img']").val();
    //var m3_img = $("input[name='m3_img']").val();
    //var m1_selimg = $("input[name='m1_selimg']").val();
    //var m2_selimg = $("input[name='m2_selimg']").val();
    //var m3_selimg = $("input[name='m3_selimg']").val();

    var m1_selimg=$('#m1_selimg div img')[0]['src'];
    var m2_img=$('#m2_img div img')[0]['src'];
    var m3_img=$('#m3_img div img')[0]['src'];
    var m4_img=$('#m4_img div img')[0]['src'];
    var sear=new RegExp('/images/nopic.jpg');
    if (!sear.test(m1_selimg)) 
    {
        $('.diyiye_img').attr('src',m1_selimg);
    }
    if (!sear.test(m2_img)) 
    {
        $('.dierye_img').attr('src',m2_img);
    }
    if (!sear.test(m3_img)) 
    {
        $('.disanye_img').attr('src',m3_img);
    }
    if (!sear.test(m4_img)) 
    {
        $('.disiye_img').attr('src',m4_img);
    }
    if (m1_name!='')
    {
        $('.diyiye').text(m1_name);
    }
    if (m2_name!='')
    {
        $('.dierye').text(m2_name);
    }
    if (m3_name!='')
    {
       $('.disanye').text(m3_name);
    }
    if (m4_name!='')
    {
       $('.disiye').text(m4_name);
    }
    $('.diyiye').css('color',sel_color);
    $('.dierye').css('color',color);
    $('.disanye').css('color',color);
    $('.disiye').css('color',color);
    $('.phone_modle_border').css('background',background_color);
$('#click').click(function(){
    var m1_name = $("input[name='m1_name']").val();
    var m2_name = $("input[name='m2_name']").val();
    var m3_name = $("input[name='m3_name']").val();
    var m4_name = $("input[name='m4_name']").val();
    var color = $("input[name='color']").val();
    var sel_color = $("input[name='sel_color']").val();
    var background_color = $("input[name='background_color']").val();
    //var m1_img = $("input[name='m1_img']").val();
    //var m2_img = $("input[name='m2_img']").val();
    //var m3_img = $("input[name='m3_img']").val();
    //var m1_selimg = $("input[name='m1_selimg']").val();
    //var m2_selimg = $("input[name='m2_selimg']").val();
    //var m3_selimg = $("input[name='m3_selimg']").val();

    var m1_selimg=$('#m1_selimg div img')[0]['src'];
    var m2_img=$('#m2_img div img')[0]['src'];
    var m3_img=$('#m3_img div img')[0]['src'];
    var m4_img=$('#m4_img div img')[0]['src'];
    var sear=new RegExp('/images/nopic.jpg');
    if (!sear.test(m1_selimg)) 
    {
        $('.diyiye_img').attr('src',m1_selimg);
    }
    if (!sear.test(m2_img)) 
    {
        $('.dierye_img').attr('src',m2_img);
    }
    if (!sear.test(m3_img)) 
    {
        $('.disanye_img').attr('src',m3_img);
    }
    if (!sear.test(m4_img)) 
    {
        $('.disiye_img').attr('src',m4_img);
    }
    if (m1_name!='')
    {
        $('.diyiye').text(m1_name);
    }
    if (m2_name!='')
    {
        $('.dierye').text(m2_name);
    }
    if (m3_name!='')
    {
       $('.disanye').text(m3_name);
    }
    if (m4_name!='')
    {
       $('.disiye').text(m4_name);
    }
    $('.diyiye').css('color',sel_color);
    $('.dierye').css('color',color);
    $('.disanye').css('color',color);
    $('.disiye').css('color',color);
    $('.phone_modle_border').css('background',background_color);
});
</script>
<style type="text/css">
.img-thumbnail{
    height: 70px!important;
    width: 70px!important;
}
 .page{
    height: 700px;
    width: 1030px;
 }
.phone_border{
    height: 10px;
    width: 138px;
    float: right;
    margin-left: 0;
}
.phone_img{
    height: 570px;
    width: 300px;
}
.phone_img_border{
    height: 188px;
    width: 300px;
    margin-top: 280px;
}
.phone_modle_border{
    position: absolute;
    width: 240px;
    height: 60px;
    margin-left: 31px;
    margin-top: -134px;
    /*background: red;*/
}
.phone_modle{
    height: 60px;
    width: 25%;
    float: left;
}
.phone_modle_img{
    height: 30px;
    width: 30px;
    margin: 0 auto;
    display: block;
    margin-top: 5px;
}
.phone_modle_title{
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #666666;
    line-height: 25px;
}
.choose_border{
    height: 1162px;
    width: 530px;
    border: 1px solid #D0D0D0;
    float: left;
    margin-left: 120px;
    background: #FFFFFF;
}
.choose_border_title{
    width: 45%;
    float: left;
    padding-left: 5%;
    padding-top: 20px;
    color: #666666;
    line-height: 30px;
    font-size: 15px;
}
.choose_border_input{
    width: 45%;
    height: 120px;
    margin-left: 3.3%;
    margin-top: 20px;
    float: left;
}
.choose_bottom{
    width: 100%;
    height: 50px;
    margin-top: 10px;
    float: left;
}
.choose_bottom_title{
    width: 25%;
    padding-left: 5%;
    height: 50px;
    line-height: 50px;
    color: #666666;
    float: left;
}
.choose_bottom_input{
    padding-top: 10px;
    height: 90px;
    width: 70%;
    float: left;
    /*margin-left: 60px;*/
}
</style>

    {template 'footer'}